<template>
  <div id="menuConfiguration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <span>版本管理</span>

          <el-button
            class="handleHotUpdate"
            @click="handleHotUpdate"
            type="primary"
          >
            在线热更新
          </el-button>
        </div>
      </template>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column
          prop="name"
          label="项目名称/编号"
          align="center"
          width="150px"
        >
          <template #default="scopep">
            <p>{{ scopep.row.name }}</p>
            <p>{{ scopep.row.pjnumber }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="打包" width="60" align="center">
          <template #="scope">
            <i
              class="iconfont icon-zaixian"
              :style="
                scope.row.pack?.online == 1
                  ? 'color: #409eff'
                  : 'color: #999999'
              "
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="icon"
          label="打包时间"
          align="center"
          width="160px"
        >
          <template #default="scope">
            <p>{{ scope.row.pack?.packed_time }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="运行状态" align="center">
          <template #default="scope">
            <div
              class=""
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <p style="text-align: left; padding-right: 10px">
                {{ scope.row.pack?.packed_log.substring(0, 50) }}
              </p>
              <p
                @click="cope(scope.row.pack?.packed_log)"
                style="color: blue; width: 100px; cursor: pointer"
              >
                复制
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="部署状态" width="200" align="center">
          <template #default="scope">
            <div>
              正式：
              <span style="margin-right: 10px">
                {{
                  scope.row.prod_deployment?.online_tag
                    ? scope.row.prod_deployment?.online_tag.slice(0, 8)
                    : ''
                }}
              </span>

              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prod_deployment?.oks) || '空'
                "
                placement="top"
              >
                <span> {{ scope.row.prod_deployment?.oks?.length }} </span>
              </el-tooltip>
              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prod_deployment?.errors) ||
                  '空'
                "
                placement="top"
              >
                <span style="color: red">
                  {{ scope.row.prod_deployment?.errors?.length }}
                </span>
              </el-tooltip>

              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prod_deployment?.offines) ||
                  '空'
                "
                placement="top"
              >
                <span style="color: red">
                  {{ scope.row.prod_deployment?.offines?.length }}
                </span>
              </el-tooltip>
            </div>
            <div>
              测试：
              <span style="margin-right: 10px">
                {{
                  scope.row.test_deployment?.online_tag
                    ? scope.row.test_deployment?.online_tag.slice(0, 8)
                    : ''
                }}
              </span>

              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.test_deployment?.oks) || '空'
                "
                placement="top"
              >
                <span> {{ scope.row.test_deployment?.oks?.length }} </span>
              </el-tooltip>
              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.test_deployment?.errors) ||
                  '空'
                "
                placement="top"
              >
                <span style="color: red">
                  {{ scope.row.test_deployment?.errors?.length }}
                </span>
              </el-tooltip>

              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.test_deployment?.offines) ||
                  '空'
                "
                placement="top"
              >
                <span style="color: red">
                  {{ scope.row.test_deployment?.offines?.length }}
                </span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="代码状态"
          align="center"
          width="200"
        >
          <template #default="scope">
            <div>
              发布版本：
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prodDiffs?.logs) || '空'
                "
                placement="top"
              >
                <span>
                  {{ scope.row.prodDiffs?.logsLength }}
                </span>
              </el-tooltip>
              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prodDiffs?.sourcecode) || '空'
                "
                placement="top"
              >
                <span>
                  {{ scope.row.prodDiffs?.sourcecodeLength }}
                </span>
              </el-tooltip>
            </div>
            <div>
              发布开发：
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(
                    scope.row.prodAndtestDiffs?.sourcecode
                  ) || '空'
                "
                placement="top"
              >
                <span>
                  {{ scope.row.prodAndtestDiffs?.sourcecodeLength }}
                </span>
              </el-tooltip>
              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prodAndtestDiffs?.release) ||
                  '空'
                "
                placement="top"
              >
                <span>
                  {{ scope.row.prodAndtestDiffs?.releaseLength }}
                </span>
              </el-tooltip>
              |
              <el-tooltip
                class="box-item"
                effect="light"
                :raw-content="true"
                :content="
                  formatArrayForTooltip(scope.row.prodAndtestDiffs?.dev) || '空'
                "
                placement="top"
              >
                <span>
                  {{ scope.row.prodAndtestDiffs?.devLength }}
                </span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" align="center" width="280px">
          <template #default="scope">
            <div style="display: flex; flex-direction: row; gap: 5px">
              <el-tooltip
                class="box-item curr"
                effect="light"
                :raw-content="true"
                content="自动开关"
                placement="top"
              >
                <el-switch
                  @change="changeEnable(scope.row)"
                  v-model="scope.row.isauto"
                />
              </el-tooltip>

              <el-button
                class="curr"
                type="primary"
                @click="handleClick(scope.row, false)"
              >
                版本管理
              </el-button>

              <el-button
                class="curr"
                type="primary"
                @click="handleClick(scope.row, true)"
              >
                发布历史
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { projectsList, switchmode } from '@/api/system/versionManage';
import { ElMessage } from 'element-plus';

const router = useRouter();

const tableData = ref([]);

// countent 内容转换
const formatArrayForTooltip = (array) => {
  if (!Array.isArray(array)) {
    return ''; // 如果传入的不是数组，返回空字符串
  }
  return array.join('<br/>'); // 使用 <br/> 换行符连接数组元素
};

const handleClick = (row, ishistory) => {
  row['historymode'] = ishistory;
  router.push({
    path: './versionManageSetUp',
    query: { val: JSON.stringify(row) },
  });
};

const getProjectsList = () => {
  projectsList().then((res) => {
    tableData.value = res.data;
  });
};
getProjectsList();

const changeEnable = (row) => {
  const data = {
    pjnumber: row.pjnumber,
  };
  switchmode(data)
    .then((res) => {
      if (res.code === 20000) {
        ElMessage.success('修改成功');
      } else {
        getProjectsList();
      }
    })
    .catch(() => {
      getProjectsList();
    });
};

// 在线热更新页面
const handleHotUpdate = () => {
  router.push({
    path: '/system/hotUpdate',
  });
};
const cope = (text) => {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      ElMessage.success('复制成功');
    })
    .catch(() => {
      ElMessage.error('复制失败');
    });
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }
  .handleHotUpdate {
    margin-left: 100px;
  }
}
.curr {
  cursor: pointer;
}
</style>
